<template>
  <div id="workSpace">
    <boxconfirm content_title="完成个人认证，可试用背调功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goMember" ref="bboxconfirm"></boxconfirm>
		<boxconfirm content_title="完成企业认证，启用背调全部功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goCompany" ref="bbboxconfirm"></boxconfirm>
    <boxconfirm content_title="需管理员才能充值" content_confirm="确定" content_cancel="取消" @confirmClick="goMembers" ref="aaa"></boxconfirm>
    <div class="work_head" :class="headIos?'side-fixd-ios':'side-fixed'">
      <div class="work_title_head">
        <div class="work_title_name">
          <div class="title_name_back"></div>
          <!-- 认证过 -->
          <div class="title_main" v-if="cerstateone">
            <span class="head_portrait" v-if="acquiescence"><img :src="levelone.facePhoto" alt=""></span>
            <span class="head_portrait" v-else><img src="../../assets/img/center/Bitmap.png" alt=""/></span>
            <ul class="names_company">
              <li>
                <span>{{ levelone.realName }}</span>
                <span class="postwei">{{ levelone.position }}</span>
              </li>
              <li class='company_i'>{{ levelone.companyInfoFullName }}</li>
            </ul>
            <span class="review_all review_state statsa">已认证</span>
          </div>
          <!-- 认证中或认证未通过 -->
          <div class="title_main" @click="cationstate(levelone.CompanyIsAuth,levelone.isAuth)" v-if="cerstatetwo">
            <span class="head_portrait" v-if="acquiescence"><img :src="levelone.facePhoto" alt=""></span>
            <span class="head_portrait" v-else><img src="../../assets/img/center/Bitmap.png" alt=""/></span>
            <ul class="names_company">
              <li>
                <span>{{ levelone.realName }}</span>
              </li>
              <li class='company_i'>尚未企业认证</li>
            </ul>
            <span class="review_all review_origin">{{ levelone.CompanyIsAuth | filterone(levelone.CompanyIsAuth) }}</span>
          </div>
          <!-- 未登录 -->
          <div class="title_main" v-if="truenot" @click="enters">
            <span class="head_portrait"><img src="../../assets/img/center/Bitmap.png" alt=""></span>
            <div class="notload" >未登录</div>
            <span class="review_all review_origin">去登陆</span>
          </div>
        </div>
        <div class="work_head_prompting" @click="showInfo(levelone.memberInfoId)">
          <span class="me_prompting"></span>
        </div>
      </div>
      <!-- 头部数据 -->
      <div class="data_head">
        <flexbox :gutter="0" wrap="wrap" class="head_ux_com">
          <flexbox-item :span="1/3">
            <div class="head_flex_demo" @click="homeBalance" >
              <p>账户余额 (元)</p>
              <div>{{ levelone.totalAmount }}</div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/3">
            <div class="head_flex_demo" @click="homeConsumption">
              <p>当月消费 (元)</p>
              <div>{{ levelone.sumTotal }}</div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/3" >
            <div class="head_flex_demo" @click="homeSpace">
              <p>职说空间</p>
              <div>{{ levelone.storageNumberByOut }}/{{ levelone.storageNumber }}</div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div class="fixed_content" :class="headIos?'side-fixd-ios':''"> 
      <div class="home_banner" v-if="topbanner">
          <div class="banner_box" @click="alink(bannerList.advListFirst.advlLink)">
            <img :src="bannerList.advListFirst.advPhoto" alt="">
          </div>
      </div>
      <!-- 直说评价 -->
      <div class="as_said" v-if="isAuth">
        <div class="home_said_head">
          <span>萝卜职说</span>
          <div class="homebtn" @click="creatarc">
            <img src="../../assets/img/center/creatfile.png" alt="">
          </div>
        </div>
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="1/2">
            <div class="flex_said flex_left" @click="ontheJob">
              <div class="funct_icon">
                <img src="../../assets/img/center/archives.png" alt="">
              </div>
              <div class="funct_data">
                <div class="funct_num">{{ leveltwo.secTotalNumber }}</div>
                <p class="wenzi">全部员工</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/2" >
            <div class="flex_said" @click="haveRatings">
              <div class="funct_icon">
                <img src="../../assets/img/center/appraise.png" alt="" style="position: relative; left: .2rem;"/>
              </div>
              <div class="funct_data">
                <p class="funct_num">{{ leveltwo.secTotalNumberByComm }}</p>
                <p class="wenzi">已评员工</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/2" >
            <div class="flex_said flex_left" @click="leaveOffice">
              <div class="funct_icon">
                <img src="../../assets/img/center/dappraise.png" alt="">
              </div>
              <div class="funct_data">
                <p class="funct_num">{{ leveltwo.secTotalNumberByRes }}</p>
                <p class="wenzi">离职待评</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/2" >
            <div class="flex_said" @click="asSaid">
              <div class="funct_icon">
                <img src="../../assets/img/center/beprocessed.png" alt="">
              </div>
              <div class="funct_data">
                <p class="funct_num">{{ leveltwo.secTotalNumberByLeaveTime }}</p>
                <p class="wenzi">待处理</p>
              </div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <!-- 背景调查 -->
      <div class="as_said" style="margin-top: 10px;">
        <div class="home_said_head">

          <span>萝卜背调</span>
          <div class="homebtn" @click="startBack">
            <img src="../../assets/img/center/startback.png" alt="">
          </div>
        </div>
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="1/2" >
            <div class="flex_said flex_left" @click="reportCenter">
              <div class="funct_icon">
                <img src="../../assets/img/center/report.png" alt="">
              </div>
              <div class="funct_data">
                <p class="funct_num">{{ levelthree.reportNum }}</p>
                <p class="wenzi">报告中心</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/2">
            <div class="flex_said" @click="reportUnread">
              <div class="funct_icon">
                <img src="../../assets/img/center/unread.png" alt="">
              </div>
              <div class="funct_data">
                <p class="funct_num">{{ levelthree.reportIsWriteTotal }}</p>
                <p class="wenzi">未读报告</p>
              </div>
            </div>
          </flexbox-item>
          <flexbox-item :span="1/2" >
            <div class="flex_said flex_left" @click="reportProcessed" >
              <div class="funct_icon">
                <img src="../../assets/img/center/generate.png" alt="">
              </div>
              <div class="funct_data" >
                <p class="funct_num">{{ levelthree.reportFailedTotal }}</p>
                <p class="wenzi">待处理</p>
              </div>
            </div>
          </flexbox-item>
            <flexbox-item :span="1/2">
              <div class="flex_said" @click="reportQuestion">
                <div class="funct_icon">
                  <img src="../../assets/img/center/question.png" alt="">
                </div>
                <div class="funct_data">
                  <p class="funct_num">{{ levelthree.reportAbnormalTotal }}</p>
                  <p class="wenzi">问题报告</p>
                </div>
              </div>
            </flexbox-item>
        </flexbox>
        <!-- <div class="btn_img">
          <img src="../../assets/created@3x.png" alt="">
        </div> -->
      </div>
      <ul>
        <li v-for="s in bannerList.advList" :key="s.id">
          <div class="home_banner" v-if="bottombanner">
            <!-- <a :href="s.advlLink"> -->
              <div class="banner_box" @click="alink(s.advlLink)">
                <img :src="s.advPhoto" alt="">
              </div>
            <!-- </a> -->
          </div>
        </li>
      </ul>
      <div class="maskts" @click="enters" v-if="maska"></div>
    </div> 
  </div>
</template>
<script>
  import { Flexbox, FlexboxItem } from 'vux'
  import util from '../../libs/util'
  import boxconfirm from '../common/boxconfirm';
  export default {
    name: 'worker',
    data() {
      return {
        levelone: '', // 账户个人信息
        leveltwo: '', // 职说信息
        levelthree: '', // 背调信息
        isAuth: true,
        truenot: false, // 是否未登录展示
        cerstateone: false, // 认证通过
        cerstatetwo: false, // 认证未通过或未认证
        stateless: {
          totalAmount: 0,
          sumTotal: 0,
          storageNumberByOut: 0,
          storageNumber: 0,
        },
        levewo: {
          secTotalNumber: 0,
          secTotalNumberByComm: 0,
          secTotalNumberByRes: 0,
          secTotalNumberByLeaveTime: 0
        },
        leveree: {
          reportNum: 0,
          reportIsWriteTotal: 0,
          reportFailedTotal: 0,
          reportAbnormalTotal: 0
        },
        logstate: '', //登陆状态
        personalState: '', //个人是否认证
        sinceState: '', //是否自调过
        maska: false,
        topbanner: false,
        bottombanner: false,
        bannerList: '',
        companysid: '',
        sid: '',
        headIos: false,
        acquiescence: true
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      boxconfirm
    },
    created() {
      this.logstate = this.$cookie.get('mobole'); //获取登陆状态
      this.sinceState = this.$cookie.get('selfExaminationTimes '); //是否自调
      this.homeget();
      if(window.navigator.userAgent.indexOf('LBLSIOS')>-1) {
        this.headIos = true;
      }
      this.getbanner();
    },
    methods: {
      enters() {
        if (this.logstate) {
          this.maska = false;
        } else {
          this.maska = true;
          this.$router.push('/entryPass');
        }
      },
      getbanner() { // banner图请求
        var that = this;
        var drl = 'lblsapp-h5/v2/index/queryBannerList.json';
        util.ajax.post(drl).then(function(stats){
          that.bannerList = stats.data.res.data;
          if(stats.data.res.data.advListFirst.advPhoto){
            that.topbanner = true;
          };
          if (stats.data.res.data.advListFirst.advList != '') {
            that.bottombanner = true;
          };
        }).catch(function(error){
          console.log(error);
        })
      },
      alink(f) {
        this.$cookie.set('alink', f, 0.5);
        this.$router.push('/hunter');
        // this.$router.push({ name: '_hunter', params: { alink: f } });
      },
      showInfo(k){
        if (this.logstate){
          this.$router.push({ path: "/myinfo", query: { bp: k } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      homeget() {
        let that = this;
        let url = '/lblsapp-h5/v2/personCenter/personCenterIndex.json';
        const datas = {};
        if(that.logstate){ //如果登陆
          util.ajax.post(url).then(function(stats){
            if(stats.data.code == '0'){
              that.$cookie.set('companystate', stats.data.res.data.CompanyIsAuth, 0.5);
              that.$cookie.set('indstate', stats.data.res.data.isAuth, 0.5);
              that.levelone = stats.data.res.data;
              if (stats.data.res.data.facePhoto == '') {
                that.acquiescence = false;
              }else {
                that.acquiescence = true;
              }
              datas.memberId = stats.data.res.data.memberInfoId;
              datas.companyInfoId = stats.data.res.data.companyInfoId; //零时使用 可有可无
              that.companysid = stats.data.res.data.CompanyIsAuth;
              that.sid = stats.data.res.data.isAuth;
              that.Managers = stats.data.res.data.isManager;
              if(that.levelone.CompanyIsAuth == '0' || that.levelone.CompanyIsAuth == '2' || that.levelone.CompanyIsAuth == '3' ){ // 状态判断 如果是 未认证或是未通过认证或正在认证中 只显示出背景调查页面
                that.isAuth = false;
                that.cerstatetwo = true;
                that.requestBackTo(datas,that); //此时是未认证以及认证未通过状态 只需要传用户ID
              } else if(that.levelone.CompanyIsAuth == '1') { // 登陆并且认证状态
                that.cerstateone = true;
                that.requestAsSaid(datas,that);
                that.requestBackTo(datas,that);
              };
            } else {
              that.truenot = true;
              that.levelone = that.stateless;
              that.leveltwo = that.levewo;
              that.levelthree = that.leveree;
              that.logstate = '';
            }
          }).catch(function(error){
            console.log(error);
          });
        } else {
          that.truenot = true;
          that.levelone = that.stateless;
          that.leveltwo = that.levewo;
          that.levelthree = that.leveree
        }
      },
      requestAsSaid(k,p) { // 请求职说数据
        let that = this;
        let th = p;
        let url = 'lblsapp-h5/v2/index/totalSecretFile.json';
          util.ajax.post(url,k).then(function(stats){
            th.leveltwo = stats.data.res;
          }).catch(function(error){
            console.log(error);
          })
      },
      requestBackTo(y,p) { // 请求背调数据
        let url = 'lblsapp-h5/v2/index/totalReqCreditReport.json';
        let th = p;
        util.ajax.post(url,y).then(function(stats) {
          th.levelthree = stats.data.res;
        }).catch(function(error) {
          console.log(error);
        })
      },
      headPho(k) {
        if (that.levelone.isAuth == '0' || that.levelone.isAuth == '2' || that.levelone.isAuth == '3') { // 状态判断 如果是 未认证或是未通过认证或正在认证中 只显示出背景调查页面
          this.$router.push('/userEnterprise');
        } else if (that.levelone.isAuth == '1') { // 登陆并且认证状态
          this.$router.push('/userEnterprise');
        };
      },
      homeBalance() { // 余额跳转
        if(this.logstate){
          if (this.sid == '1') {
            if (this.companysid == '1') {
              if (this.Managers == '1') { // 添加判断是否为管理员
                this.$router.push('/userRecharge');
              } else {
                this.$refs.aaa.show();
              }
            } else if (this.companysid == '0') {
              // this.$router.push('/userEnterprise');
              this.$refs.bbboxconfirm.show();
            } else if (this.companysid == '2') { //未通过
              this.$router.push('/userCertificationState');
            } else if (this.companysid == '3') { //未通过
              this.$router.push('/userUnderreview');
            }
          } else {
            this.$refs.bboxconfirm.show();
            // this.$router.push('/userCertification');
          }
        }else {
          this.$router.push('/entryPass');
        }
      },
      homeConsumption() { //消费跳转
        if(this.logstate){
          this.$router.push('/userConsumption');
        }else {
          this.$router.push('/entryPass');
        }
      },
      homeSpace() { //空间资料
        if(this.logstate){
          if (this.sid == '1') {
            if (this.companysid == '1') {
              this.$router.push('/userSpace');
            } else if (this.companysid == '0') {
              this.$refs.bbboxconfirm.show();
            } else if (this.companysid == '2') { //未通过
              this.$router.push('/userCertificationState');
            } else if (this.companysid == '3') { //未通过
              this.$router.push('/userUnderreview');
            }
          } else {
            this.$refs.bboxconfirm.show();
          }
        } else {
          this.$router.push('/entryPass');
        }
      },
      // 职说
      creatarc() { //创建员工档案
        if(this.logstate){
          this.$router.push('/addsecret');
        } else {
          this.$router.push('/entryPass');
        }

      },

      // 背调
      startBack() { //开始背调
        if(this.logstate){
          if(this.levelone.CompanyIsAuth == '1'){ //企业认证通过  直接进背调而不是自调
              this.$router.push('/startcheck');
          } else { //企业认证没有通过 未认证等等只要没有认证通过
            if(this.levelone.isAuth == '1'){ //个人是否认证
              if(this.sinceState == '0'){ // 是否自调过
                // this.$router.push('/userEnterprise'); // 进入到企业认证的页面
                this.$refs.bbboxconfirm.show();
              }else { // 没有自调
                console.log(this.levelone.idCard);
                this.$router.push({path: "/selfService", query: { name: this.levelone.realName, idCard: this.levelone.idCard, mobile: this.levelone.mobile, sourceType: 'NORMAL' } });
              }
            } else { //没有个人认证
              // this.$router.push('/userCertification'); //跳个人认证
              this.$refs.bboxconfirm.show();
            }
          }
        } else {
          this.$router.push('/entryPass');
        }
      },
      /*跳转个人认证*/
      goMember: function() {
        this.$router.push({ path: '/userCertification' })
      },
      /*跳转企业认证*/
      goCompany: function() {
        this.$router.push({ path: '/userEnterprise' })
      },
      goMembers:function() { },
      reportCenter() { //报告中心
        if(this.logstate){ //判断登陆状态
          this.$router.push('/archivecenter');
        } else {
          this.$router.push('/entryPass');
        }
      },
      reportUnread() { // 未读报告
        if (this.logstate) { //判断登陆状态
          this.$router.push({ path: '/archivecenter', query: { donot: '1' } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      reportProcessed() { // 待处理
        if (this.logstate) { //判断登陆状态
          this.$router.push({ path: '/archivecenter', query: { donot: '2' } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      reportQuestion() { // 问题报告
        if (this.logstate) { //判断登陆状态
          this.$router.push({ path: '/archivecenter', query: { donot: '3' } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      ontheJob() { // 在职员工
        if (this.logstate) { //判断登陆状态
          this.$router.push('/secret');
        } else {
          this.$router.push('/entryPass');
        }
      },
      haveRatings() { // 已评员工
        if (this.logstate) { //判断登陆状态
          this.$router.push('/secret');
        } else {
          this.$router.push('/entryPass');
        }
      },
      leaveOffice() { // 离职待评
        if (this.logstate) { //判断登陆状态
          this.$router.push({ path: '/secret', query: { donot: '0' } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      asSaid() { //职说待处理
        if (this.logstate) { //判断登陆状态
          this.$router.push({ path: '/secret', query: { donot: '1' } });
        } else {
          this.$router.push('/entryPass');
        }
      },
      cationstate(g,k) {
        console.log(k);
        if(k=='1'){
          if(g == '0'){
            this.$router.push('/userEnterprise');
          }else if(g == '2'){
            this.$router.push('/userCertificationState');
          } else if(g == '3') {
            this.$router.push('/userUnderreview');
          }
        }else if(k=='0') {
          this.$router.push('/userCertification');

        }else {
          if(g == '0'){
            this.$router.push('/userEnterprise');
          }else if(g == '2'){
            this.$router.push('/userCertificationState');
          } else if(g == '3') {
            this.$router.push('/userUnderreview');
          }else {
            this.$router.push('/userCertification');
          }
        }
      },
    },
    filters: {
      filterone(value,mass){
        if(mass == '0'){
          return '去认证';
        } else if(mass == '2'){
          return '未通过';
        } else if(mass == '3'){
          return '审核中'
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
  .side-fixd-ios {
    padding-top: 20px;
  }
  ul,li {
    list-style: none;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .fixed_content{
    position: fixed;
    width: 100%;
    top: 160px;
    left: 0px;
    bottom: 50px;
    height: auto;
    overflow: auto;
  }
  .fixed_content::-webkit-scrollbar {
    display: none
  }
  .notload {
    line-height: 44px;
    margin: 0 0 0 .5rem;
    color: #fff;
  }
  .maskts {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0;
  }
  #workSpace{
    position: relative;
  }
  .work_head {
    width: 100%;
    height: 160px;
    background: url('../../assets/img/center/Mask.png') no-repeat;
    background-size: cover;
    position: fixed;
    top:0;
    left:0;
    z-index: 99;
  }
  .work_title_head {
    /* border: 1px solid red; */
    height: 80px;
    display: flex;
    padding: 0 3%;
  }
  .work_title_name {
    /* width: 27.4rem; */
    width: 80%;
    /* border: 1px solid #000; */
    height: 45px;
    margin: auto 0;
    border-radius: 30px;
    position: relative;
  }
  .title_name_back {
    width: 100%;
    height: 100%;
    background-color: #FE4000;
    opacity: 0.25;
    border-radius: 30px;
  }
  .title_main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    padding: 0 0 0 .6rem;
  }
  .review_all {
    font-size: 1.1rem;
    -webkit-transform:scale(0.9);
    display: inline-block;
    width: 4rem;
    height: 1.5rem;
    border-radius: 10px;
    float: right;
    position: absolute;
    top: 1.4rem;
    right: 1.8rem;
    text-align: center;
  }
  .review_state {
    border: 1px solid #fff;
    color: #F89721;
    background-color: #fff;
  }
  .review_origin {
    border: 1px solid #FFA027;
    color: #fff;
    background-color: #FFA027;
  }
  .work_head_prompting {
    position: relative;
    width: 20%;
    height: 44px;
    /* border: 1px solid #000; */
    margin: auto 0;
    text-align: right;
  }
  .me_prompting {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url('../../assets/peopmting.png') no-repeat;
    background-size: 2rem;
    position: absolute;
    top: 10px;
    right: 15%;
  }
  .head_portrait {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 100%;
    margin: auto 5px;
    /* margin-left: 5px; */
  }
  .head_portrait img {
    border-radius: 100%;
  }
  .postwei {
    color: #F9C39D;
  }
  .names_company {
    color: #fff;
    padding: 0 0 0 .5rem;
    font-size: 1.2rem;
    margin: auto 0;
  }
  .company_i {
    font-size: 1rem;
    width: 13rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .head_flex_demo {
    text-align: center;
  }
  .head_flex_demo p {
    color: #FFDCC1;
  }
  .head_flex_demo div {
    font-size: 2rem;
  }
  .data_head {
    height: 80px;
    color: #fff;
    /* background: url('../../assets/img/center/Rectangle.png') no-repeat; */
  }
 
  .head_ux_com {
    width: 100%;
    height: 80px;
    z-index: 9;
  }
  .home_banner {
    width: 100%;
    padding: 1rem 0;
  }
  .banner_box {
    /* border: 1px solid red; */
    height: 6rem;
    /* width: 80%; */
    width: 89.3%;
    margin:auto;
  }
  .home_banner img {
    width: 100%;
    height: 6rem;
  }
  .as_said {
    background-color: #fff;
    padding: 1.5rem 0 0 0;
    overflow: hidden;
  }
  .home_said_head {
    /* text-align: center; */
    height: 3.8rem;
    line-height: 3.8rem;
    color: #808080;
    font-size: 1.4rem;
    padding: 0 0 0 1.5rem;
  }
  .homebtn {
    width: 9.6rem;
    height: 3.8rem;
    float: right;
  }
  .homebtn img {
    width: 100%;
    height: 100%;
  }
  .statsa {
    background-color: #56C401;
    color: #fff;
    border: 1px solid #56C401;
  }
  /* .home_said_head i {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    background-image: url('../../assets/Rectangle 5@3x.png');
    background-size: .8rem;
  } */
  .home_said_head span {
    margin: 0 .3rem;
    position: relative;
    left: 6%;
    /* top: 1rem; */
  }
  .flex_said {
    text-align: center;
    overflow: hidden;
    /* padding: 1rem 2rem; */
    padding: 1.8rem;
  }
  .flex_left {
    padding-left: 2.5rem;
  }
  .funct_icon {
    /* width: 4rem;
    height: 4rem; */
    width: 25%;
    height: 25%;
    float: left;
    margin-right: 1rem;
    position: relative;
    left: 10%;
    top: .8rem;
  }
  .funct_icon img {
    width: 100%;
    height: 100%;
  }
  .funct_data {
    float: left;
    position: relative;
    left: 10%;
    color: #212121;
    top: -5px;
  }
  .funct_data .funct_num {
    font-size: 1.8rem;
    color: #F89721;
    text-align: left;
    font-family: '微软雅黑';
  }
  .funct_data .wenzi {
    font-size: 1.2rem;
  }
  .btn_img {
    text-align: center;
  }
  .btn_img img {
    width: 12.4rem;
    height: 4rem;
  }
  .funct_data .funct_num {
    /* font-family: -apple-system-font, "Helvetica Neue", sans-serif; */
    font-family: PingFangSC-Semibold;
    font-size: 2rem;
  }
</style>

